<template>
  <div class="ui-page">
    <view class="ui-demo-block">
      <view class="demo-block--title" inline>基础</view>
      <uiTag>默认标签</uiTag>
      <uiTag type="primary">标签</uiTag>
      <uiTag type="info">标签</uiTag>
      <uiTag type="danger">标签</uiTag>
      <uiTag type="warning">标签</uiTag>
    </view>

    <!-- 标签的大小 -->
    <view class="ui-demo-block">
      <view class="demo-block--title" inline>标签的大小</view>
      <uiTag type="primary" inline>默认大小</uiTag>
      <uiTag type="primary" size="large" inline>large</uiTag>
      <uiTag type="primary" size="small" inline>small</uiTag>
      <uiTag type="primary" size="mini" inline>mini</uiTag>
    </view>

    <!-- 朴素标签 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">朴素标签</view>
      <uiTag plain>默认标签</uiTag>
      <uiTag type="primary" plain>标签</uiTag>
      <uiTag type="info" plain>标签</uiTag>
      <uiTag type="danger" plain>标签</uiTag>
      <uiTag type="warning" plain>标签</uiTag>
    </view>

    <!-- 禁用状态 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">禁用状态</view>
      <uiTag inline disabled>默认标签</uiTag>
      <uiTag type="primary" size="large" inline disabled>标签</uiTag>
      <uiTag type="info" size="small" inline disabled>标签</uiTag>
      <uiTag type="danger" size="mini" inline disabled>标签</uiTag>
      <uiTag type="warning" size="mini" inline disabled>标签</uiTag>

      <uiTag type="primary" plain inline disabled>标签</uiTag>
      <uiTag type="primary" text inline disabled>标签</uiTag>
    </view>

    <!-- 标签形状 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">标签形状</view>
      <uiTag>默认标签</uiTag>
      <uiTag circle>圆角</uiTag>
      <uiTag type="primary" circle>large</uiTag>
      <uiTag type="primary" size="small" circle>small</uiTag>
      <uiTag type="primary" circle>xss</uiTag>
    </view>

    <!-- 标签形状 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">mark半圆角</view>
      <uiTag mark>圆角</uiTag>
      <uiTag type="primary" mark>large</uiTag>
      <uiTag type="primary" mark>small</uiTag>
      <uiTag type="primary" mark>xss</uiTag>
    </view>
    <!-- 自定义颜色 -->
    <view class="ui-demo-block">
      <view class="demo-block--title">自定义颜色</view>
      <uiTag color="blue">圆角</uiTag>
      <uiTag color="#ddd" plain>圆角</uiTag>
      <uiTag color="#ddd" textColor="red" plain>圆角</uiTag>
    </view>
  </div>
</template>

<script>
import uiTagGroup from "components/base/button-group/index";
import uiTag from "components/base/tag/index";
export default {
  name: "tagComponentDEMO",
  components: {
    uiTagGroup,
    uiTag
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss" >
</style>
